<template>
  <div style="height: 100%; width: 100%">
    <div class="leftbigbox">
      <div class="nav tip">
        <dv-border-box-8>
          <a @click="qiehuan('A')" href="javascript:void(0)">A区</a>
          <a @click="qiehuan('B')" href="javascript:void(0)">B区</a>
          <a @click="qiehuan('C')" href="javascript:void(0)">C区</a>
          <a @click="qiehuan('D')" href="javascript:void(0)">D区</a>
        </dv-border-box-8>
      </div>
      <div class="bingtu tip">
        <dv-border-box-8>
          <div class="tu">
            <renyuan :fenqu="fenqu" :key="timer"></renyuan>
          </div>
        </dv-border-box-8>
      </div>
      <div class="bingtu tip">
        <dv-border-box-8>
          <div class="tu">
            <weizhangtu :fenqu="fenqu" :key="timer"></weizhangtu>
          </div>
        </dv-border-box-8>
      </div>
      <div class="bingtu tip">
        <dv-border-box-8>
          <div class="tu">
            <shebeizhanbi :fenqu="fenqu" :key="timer"></shebeizhanbi>
          </div>
        </dv-border-box-8>
      </div>
    </div>
    <div class="centerbox">
      <div>
        <dv-border-box-8>
          <el-tabs
            type="border-card"
            :stretch="true"
            :lazy="true"
            @tab-click="tab_leave"
          >
            <el-tab-pane label="违章列表"
              ><div class="box">
                <weizhang :fenqu="fenqu" :key="timer"></weizhang></div
            ></el-tab-pane>
            <el-tab-pane label="设备列表"
              ><div class="box">
                <shebei :fenqu="fenqu" :key="timer"></shebei></div
            ></el-tab-pane>
            <el-tab-pane label="异常列表"
              ><div class="box">
                <yichang :fenqu="fenqu" :key="timer"></yichang></div
            ></el-tab-pane>
            <el-tab-pane label="人员列表"
              ><div class="box">
                <renyuanlist :fenqu="fenqu" :key="timer"></renyuanlist></div
            ></el-tab-pane>
          </el-tabs>
        </dv-border-box-8>
      </div>
    </div>
    <div class="rightbigbox">
      <div class="jiankong tip">
        <dv-border-box-8>
          <h2>监控列表</h2>
          <tableV :fenqu="fenqu" :key="timer"></tableV>
        </dv-border-box-8>
      </div>
      <div class="tablebox tip" style="margin-top: 1vh">
        <dv-border-box-8>
          <h2>事故统计</h2>
          <div class="tubiao">
            <shigutongji :fenqu="fenqu" :key="timer"></shigutongji>
          </div>

          <div class="tubiao">
            <shigutongjiLine :fenqu="fenqu" :key="timer"></shigutongjiLine>
          </div>
        </dv-border-box-8>
      </div>
    </div>
  </div>
</template>
<script>
import renyuan from "../components/xianchang/renyuanzucheng.vue";
import shebei from "../components/xianchang/shebei.vue";
import renyuanlist from "../components/xianchang/renyuan.vue";
import yichang from "../components/xianchang/yichang.vue";
import weizhang from "../components/xianchang/weizhang.vue";
import shigutongji from "../components/xianchang/shigutongjibar.vue";
import weizhangtu from "../components/xianchang/weizhangtu.vue";
import shebeizhanbi from "../components/xianchang/shebeiyichangzhanbi.vue";
import tableV from "../components/zonghexinxi/tableV.vue";
import shigutongjiLine from "../components/xianchang/shigutongjiLine.vue";
export default {
  data() {
    return {
      key1: 1,
      fenqu: "A",
      timer: "",
    };
  },
  methods: {
    qiehuan(a) {
      this.fenqu = a;
      // console.log(this.fenqu);
      this.timer = new Date().getTime();
    },
    tab_leave() {
      this.timer = new Date().getTime();
    },
  },
  components: {
    renyuan,
    shebei,
    renyuanlist,
    yichang,
    weizhang,
    shigutongji,
    weizhangtu,
    shebeizhanbi,
    tableV,
    shigutongjiLine,
  },
};
</script>

<style lang="less" scoped>
.el-tabs--border-card {
  background: rgba(22, 31, 38, 0.3);
  border: 0;
  color: #fff;
}
/deep/.el-tabs--border-card > .el-tabs__header {
  background-color: rgba(22, 31, 38, 0.5);
  border-bottom: 0;
  margin: 0;
}
/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item {
  color: #fff;
}
/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: #fff;
  background-color: rgba(93, 175, 238, 0.3);
  border-right: 0;
  border-left: 0;
}
.box {
  width: 100%;
  height: 30vh;
}
.tip {
  background-color: rgba(22, 31, 38, 0.3);
}
.tu {
  height: 25vh;
  margin-top: 1vh;
}
.leftbigbox {
  float: left;
  width: 17vw;
  height: 100%;
  .nav {
    height: 8vh;
    a {
      display: inline-block;
      height: 8vh;
      line-height: 8vh;
      text-align: center;
      color: #fff;
      font-size: 1vw;
      padding: 0 1.25vw;
      &:hover {
        color: #fff;
        background-color: rgba(22, 31, 38, 0.3);
      }
      &:active {
        color: #fff;
        background-color: rgba(22, 31, 38, 0.3);
      }
    }
  }
}
.rightbigbox {
  float: right;
  width: 17vw;
  height: 100%;
  .jiankong {
    height: 40%;
    overflow: hidden;
  }
  .tablebox {
    height: 58%;
  }
}
.centerbox {
  float: left;
  margin-left: 2vw;
  width: 60vw;
  height: 100%;
}
.tubiao {
  height: 23.5vh;
}
</style>
